<template>
	<view class="wrap">
		<view class="wallet-wrap" v-if="walletState != 0">
			<view class="content">
				<image class="bg-info" src="@/static/icon_blue_card.png" mode=""></image>
				<view class="info-wrap">
					<view class="text">
						<text>账户余额（元）</text>
						<image @click="toggleEye" v-if="showBalance" src="@/static/icon_eyes_show.png" mode=""></image>
						<image @click="toggleEye" v-else src="@/static/icon_eyes_close.png" mode=""></image>
					</view>
					<view class="money" v-if="!showBalance">****</view>
					<view class="money" v-else>{{totalBalance}}</view>
				</view>
				<view class="withdraw" @click="goWithdraw">提现</view>
			</view>
		</view>
		<view class="wallet-wrap" v-if="walletState == 0">
			<view class="content">
				<image class="bg-info" src="@/static/icon_gray_card.png" mode=""></image>
				<view class="text-wrap">
					<view class="title">钱包暂未激活</view>
					<view class="desc">请先完成司机认证开通电子钱包</view>
				</view>
				<view class="authon" @click="goAuthon">立即认证</view>
			</view>
		</view>
		<view class="bottom" v-if="walletState == 0" @click="goAddCard">
			<image src="@/static/icon_blue_add.png" mode=""></image>
			<text>添加银行卡</text>
		</view>
		<view class="tabs" v-if="walletState != 0">
			<view class="item" @click="goBill">
				<view class="left">
					<image src="@/static/icon_black_bill.png" mode=""></image>
					<text>账单明细</text>
				</view>
				<view class="right">
					<image src="@/static/icon_enter.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="goCardList">
				<view class="left">
					<image src="@/static/icon_black_card.png" mode=""></image>
					<text>银行卡</text>
				</view>
				<view class="right">
					<text>{{cardText}}</text>
					<image src="@/static/icon_enter.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="column-css" style="background: #FFFFFF;width: 95%; padding: 20rpx; border-radius: 15rpx;">
				<view class="row-css pop-view-text" style="padding-top: 20rpx;">{{popText}}</view>
				<view class="row-css pop-view-text">验证码已发送您的手机</view>
				<view style="padding: 20rpx;">
					<valid-code v-model="vacode" type="bottom" :maxlength="6" @finish="finish"></valid-code>
				</view>
				<view
					style="color:#00BFFF; margin: 30rpx;font-size: 32rpx; display: flex; flex:1; justify-content: center;align-items: center;"
					@click="sendcode">
					{{ codeText }}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				driverId: '',
				walletState: '',	//0-见证宝和二类户都没有 1-见证宝有 2-二类户有 3-见证宝和二类户都有
				livingBodyState: '',	// 0-未活体，1-已活体
				jzbBalance: 0,
				elhBalance: 0,
				payId: '',
				isSign: false,
				showBalance: false,
				totalBalance: 0,
				cardInfoList: [],
				cardText: '',
				timer: null,
				
				otpOrderNo: '',
				businessNo: '',
				popText: '',
				codeText: '重新获取验证码',
				time: 60,
				vacode: '',
				isDraw: false,
			}
		},
		async onLoad() {
			this.driverId = uni.getStorageSync(this.DATA_KEY.userInfo).driverId
			await new Promise(resolve => {
				this.wxRequest({
					url: `${this.API}/myWallet/queryUsersInformation`,
					method: 'POST',
					title: '加载中...',
					success: res => {
						this.walletState = res.data.data
						resolve()
					},
				});
			})
			await new Promise(resolve => {
				this.wxRequest({
					url: `${this.API}/driverService/getDriverInfoByDriverID?driver_id=` + this.driverId + '&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId),
					method: 'POST',
					title: '加载中...',
					success: res => {
						this.livingBodyState = res.data.data.userModel.livingBodyState
						resolve()
					},
				});
			})
			if(this.walletState == 1){
				this.jzbQueryBalance()
			}else if(this.walletState == 3){
				this.jzbQueryBalance()
				this.getDriverPay()
			}else if(this.walletState == 2){
				this.getDriverPay()
			}
		},
		onShow() {
			if(this.walletState == 1){
				this.jzbQueryBalance()
			}else if(this.walletState == 3){
				this.jzbQueryBalance()
				this.getDriverPay()
			}else if(this.walletState == 2){
				this.getDriverPay()
			}
		},
		methods: {
			goWithdraw() {
				if(this.walletState == 1){
					let list = this.cardInfoList.filter((item) => {
						return item.type == 1
					})
					if(!this.cardInfoList.length || !list.length){
						uni.showModal({
							title: '绑卡提醒',
							content: '您的电子钱包尚未绑定银行卡，请您先完成本人的提现卡绑定',
							cancelText: '暂不绑卡',
							cancelColor: '#999',
							confirmText: '去绑卡',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/wallet/addCard'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}else{
						this.jumpWithdraw()
					}
				}
				if(this.walletState == 2){
					uni.showToast({
						title: '电子钱包激活失败请联系管理员',
						icon: 'none',
						duration: 2000
					});
					return
					/* if(this.isSign){
						
					}else{
						this.isDraw = true
						this.getBalanceCode()
					} */
				}
				if(this.walletState == 3){
					let list = this.cardInfoList.filter((item) => {
						return item.type == 1
					})
					if(this.jzbBalance > 0){
						if(!this.cardInfoList.length || !list.length){
							uni.showModal({
								title: '绑卡提醒',
								content: '您的电子钱包尚未绑定银行卡，请您先完成本人的提现卡绑定',
								cancelText: '暂不绑卡',
								cancelColor: '#999',
								confirmText: '去绑卡',
								success: res => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/wallet/addCard'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
							return
						}
						if(this.isSign){
							this.jumpWithdraw()
						}else{
							this.isDraw = true
							this.getBalanceCode()
						}
					}else{
						if(this.isSign){
							this.jumpWithdraw()
						}else{
							this.isDraw = true
							this.getBalanceCode()
						}
					}
				}
			},
			jumpWithdraw(){
				let obj = {
					jzbBalance: this.jzbBalance,
					elhBalance: this.elhBalance,
					payId: this.payId
				}
				if(this.elhBalance > this.jzbBalance){
					//	type 1为见证宝提现， 2为二类户提现
					obj.type = 2
					obj.cardInfo = this.cardInfoList.filter((item) => {
						return item.type == 2
					})
					console.log(obj)
					let query = JSON.stringify(obj)
					uni.navigateTo({
						url: `./withdraw?query=${query}`
					})
				}else{
					obj.type = 1
					obj.cardInfo = this.cardInfoList.filter((item) => {
						return item.type == 1
					})
					console.log(obj)
					let query = JSON.stringify(obj)
					uni.navigateTo({
						url: `./withdraw?query=${query}`
					})
				}
			},
			toggleEye() {
				if(this.walletState == 1){
					this.showBalance = !this.showBalance
				}
				if(this.walletState == 2){
					if(this.isSign){
						this.showBalance = !this.showBalance
					}else{
						this.isDraw = false
						this.getBalanceCode()
					}
				}
				if(this.walletState == 3){
					if(this.isSign){
						this.showBalance = !this.showBalance
					}else{
						if(this.showBalance){
							this.showBalance = !this.showBalance
						}else{
							this.getBalanceCode()
						}
					}
				}
			},
			getBalanceCode() {
				this.popText = '查询余额请输入验证码'
				if(this.time == 60){
					this.timer = setInterval(() => {
						this.codeText = `${this.time}s后重新获取验证码`;
						this.time--;
						if (this.time < 0) {
							this.time = 60;
							this.codeText = '重新获取验证码';
							clearInterval(this.timer);
						}
					}, 1000);
				}
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getBalanceCode`,
					method: 'POST',
					data: {
						payId: this.payId
					},
					title: '查询中...',
					success: res => {
						this.otpOrderNo = res.data.data.otpOrderNo;
						this.businessNo = res.data.data.businessNo;
						this.vacode = '';
						this.$refs.popup.open();
					}
				});
			},
			sendcode() {
				if (this.time == 60) {
					this.timer = setInterval(() => {
						this.codeText = `${this.time}s后重新获取验证码`;
						this.time--;
						if (this.time < 0) {
							this.time = 60;
							this.codeText = '重新获取验证码';
							clearInterval(this.timer);
						}
					}, 1000);
					this.popText = '查询余额请输入验证码',
					// 短信查询余额
					this.wxRequest({
						url: `${this.API}/mini/erLeiHu/getBalanceCode`,
						method: 'POST',
						data: {
							payId: this.payId
						},
						title: '验证码发送中...',
						success: res => {
							this.otpOrderNo = res.data.data.otpOrderNo;
							this.businessNo = res.data.data.businessNo;
						}
					});
				}
			},
			goAuthon(){
				console.log(this.livingBodyState)
				let userInfo = uni.getStorageSync(this.DATA_KEY.userInfo)
				console.log(userInfo)
				if(this.livingBodyState == 0){
					if (!userInfo.idcard) {
						if (userInfo.status == 4) {
							uni.navigateTo({
								url: `../personal/informationSting`
							});
							return
						}
						uni.navigateTo({
							url: `../personal/driverregistration`
						});
					} else {
						uni.navigateTo({
							url: `../personal/billingmessage`
						});
					}
				}else if(this.livingBodyState == 1){
					if(this.walletState == 0){
						uni.showToast({
							title: '电子钱包激活失败请联系管理员',
							icon: 'none',
							duration: 2000
						});
						return
					}
				}
			},
			goAddCard(){
				let userInfo = uni.getStorageSync(this.DATA_KEY.userInfo)
				console.log(userInfo)
				if(this.livingBodyState == 0){
					if (!userInfo.idcard) {
						if (userInfo.status == 4) {
							uni.navigateTo({
								url: `../personal/informationSting`
							});
							return
						}
						uni.navigateTo({
							url: `../personal/driverregistration`
						});
					} else {
						uni.navigateTo({
							url: `../personal/billingmessage`
						});
					}
				}else{
					if(this.walletState == 0){
						uni.showToast({
							title: '电子钱包激活失败请联系管理员',
							icon: 'none',
							duration: 2000
						});
						return
					}else if(this.walletState == 2){
						uni.showToast({
							title: '电子钱包激活失败请联系管理员',
							icon: 'none',
							duration: 2000
						});
						return
					}else{
						uni.navigateTo({
							url: './addCard'
						})
					}
				}
			},
			jzbQueryBalance() {
				this.wxRequest({
					url: `${this.API}/mini/jzb/queryBalance`,
					method: 'POST',
					success: res => {
						let num = (res.data.data.availAmount - res.data.data.payFreeze).toFixed(2)
						this.jzbBalance = num > 0 ? num : 0
						this.queryDriverJzbCardNo()
						// if(this.jzbBalance > 0) this.queryDriverJzbCardNo()
						if(this.walletState == 1){
							this.totalBalance = this.jzbBalance
							this.showBalance = true
						}
					}
				})
			},
			queryDriverJzbCardNo() {
				this.wxRequest({
					url: `${this.API}/myWallet/queryDriverJzbCardNo`,
					method: 'POST',
					success: res => {
						this.cardInfoList = res.data.data
						let list = this.cardInfoList.filter((item) => {
							return item.type == 1
						})
						if(!this.cardInfoList.length){
							uni.showModal({
								title: '绑卡提醒',
								content: '您的电子钱包尚未绑定银行卡，请您先完成本人的提现卡绑定',
								cancelText: '暂不绑卡',
								cancelColor: '#999',
								confirmText: '去绑卡',
								success: res => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/wallet/addCard'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
							this.cardText = '请添加提现卡'
						}else{
							if(!list.length){
								uni.showModal({
									title: '绑卡提醒',
									content: '您的电子钱包尚未绑定银行卡，请您先完成本人的提现卡绑定',
									cancelText: '暂不绑卡',
									cancelColor: '#999',
									confirmText: '去绑卡',
									success: res => {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/wallet/addCard'
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
							this.cardInfoList = res.data.data
							let cardCode = this.cardInfoList[0].cardNo.slice(-4)
							this.cardText = `${this.cardInfoList[0].bankName}(${cardCode})`
						}
					}
				});
			},
			querySigning() {
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/querySigning`,
					method: 'POST',
					data: {
						payId: this.payId,
					},
					success: res => {
						console.log(res.data)
						if(res.data.msg != 0){
							this.isSign = false
						}else{
							this.isSign = true
							// 余额免签查询
							this.wxRequest({
								url: `${this.API}/mini/erLeiHu/visaFreeQuery`,
								method: 'POST',
								data: {
									payId: this.payId,
								},
								success: res => {
									let num = (res.data.data.availBalance - res.data.data.payFreeze).toFixed(2)
									this.elhBalance = num > 0 ? num : 0
									this.totalBalance = (Number(this.jzbBalance) + Number(this.elhBalance)).toFixed(2)
									this.showBalance = true
								}
							});
						}
					}
				})
			},
			getDriverPay() {
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getDriverPay`,
					method: 'POST',
					data: {
						driverId: this.driverId
					},
					title: '加载中...',
					success: res => {
						this.payId = res.data.data[0].payId
						this.querySigning()
					}
				})
			},
			
			sendcode() {
				if (this.time == 60) {
					this.timer = setInterval(() => {
						this.codeText = `${this.time}s后重新获取验证码`;
						this.time--;
						if (this.time < 0) {
							this.time = 60;
							this.codeText = '重新获取验证码';
							clearInterval(this.timer);
						}
					}, 1000);
					this.popText = '查询余额请输入验证码',
					// 短信查询余额
					this.wxRequest({
						url: `${this.API}/mini/erLeiHu/getBalanceCode`,
						method: 'POST',
						data: {
							payId: this.payId
						},
						title: '验证码发送中...',
						success: res => {
							console.log(res)
							return
							this.otpOrderNo = res.data.data.otpOrderNo;
							this.businessNo = res.data.data.businessNo;
						}
					});
				}
			},
			finish: function(e) {
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getAccountBalance`,
					method: 'POST',
					data: {
						payId: this.payId,
						otpOrderNo: this.otpOrderNo,
						otpValue: e,
						businessNo: this.businessNo
					},
					title: '余额查询中...',
					success: res => {
						let num = (res.data.data.availBalance - res.data.data.payFreeze).toFixed(2)
						this.elhBalance = num > 0 ? num : 0
						if(this.walletState == 2){
							this.totalBalance = this.elhBalance
						}else{
							this.totalBalance = (Number(this.jzbBalance) + Number(this.elhBalance)).toFixed(2)
						}
						this.showBalance = true
						this.vacode = ''
						this.$refs.popup.close();
						
						if(this.isDraw){
							if(this.walletState == 2){
								uni.showToast({
									title: '电子钱包激活失败请联系管理员',
									icon: 'none',
									duration: 2000
								});
								return
							}
							if(this.walletState == 3){
								this.jumpWithdraw()
							}
						}
					}
				});
			},
			goBill() {
				uni.navigateTo({
					url: './bill'
				})
			},
			goCardList() {
				if(this.walletState == 2){
					uni.showToast({
						title: '电子钱包激活失败请联系管理员',
						icon: 'none',
						duration: 2000
					});
					return
				}else{
					uni.navigateTo({
						url: './cardList'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.row-css {
		display: flex;
		flex-direction: row;
	}
	
	.column-css {
		display: flex;
		flex-direction: column;
	}
	.pop-view-text {
		padding-top: 20rpx;
		justify-content: center;
		font-size: 32rpx;
		color: #575858;
		text-align: center;
	}
	.wrap {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
	}
	.bottom{
		padding: 24rpx 0 calc(12rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #fff;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		image{
			width: 76rpx;
			height: 76rpx;
			margin-right: 12rpx;
		}
	}
	.tabs{
		margin-top: 16rpx;
		padding: 0 24rpx;
		background: #fff;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #F9F9F9;
			padding: 36rpx 0;
			&:last-child{
				border-bottom: none;
			}
			.left{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-weight: 400;
				color: #333330;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 12rpx;
				}
			}
			.right{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #A4A4A4;
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	.wallet-wrap {
		background: #fff;
		position: relative;
		padding: 24rpx;
		.content{
			padding: 24rpx;
			position: relative;
		}
		.withdraw{
			position: relative;
			z-index: 10;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}
		.authon{
			position: relative;
			z-index: 10;
			font-size: 32rpx;
			font-weight: 400;
			color: #177CF1;
			text-align: center;
		}
		.text-wrap{
			position: relative;
			z-index: 10;
			padding: 24rpx;
			color: #333333;
			font-weight: 500;
			.title{
				font-size: 56rpx;
			}
			.desc{
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}
		}
		.info-wrap{
			position: relative;
			z-index: 10;
			padding: 24rpx;
			.money{
				font-size: 78rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin: 24rpx 0;
			}
			.text{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-left: 12rpx;
				}
			}
		}
		.bg-info{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
</style>
